<template>
	<el-row :gutter="20">
		<el-col :span="6" :xs="24">
			<el-card class="box-card">
				<template #header>
					<div class="card-header">
						<span>个人中心</span>
					</div>
				</template>
				<UserAvatar></UserAvatar>
				<ul class="list mt-2">
					<li class="list-group-item flex justify-between align-center">
						<span>
							<iconFont iconName="user-fill"></iconFont>
							用户名称
						</span>
						<span>{{ baseInfoData.userName }}</span>
					</li>
					<li class="list-group-item flex justify-between align-center">
						<span>
							<iconFont iconName="shouji"></iconFont>
							手机号码
						</span>
						<span>{{ baseInfoData.mobile }}</span>
					</li>
					<li class="list-group-item flex justify-between align-center">
						<span>
							<iconFont iconName="youxiang"></iconFont>
							用户邮箱
						</span>
						<span>{{ baseInfoData.mail }}</span>
					</li>
					<li class="list-group-item flex justify-between align-center">
						<span>
							<iconFont iconName="jiaose"></iconFont>
							所属角色
						</span>
						<span>{{ baseInfoData.roles }}</span>
					</li>
					<li class="list-group-item flex justify-between align-center">
						<span>
							<iconFont iconName="riqi"></iconFont>
							创建日期
						</span>
						<span>{{ baseInfoData.createTime }}</span>
					</li>
				</ul>
			</el-card>
		</el-col>
		<el-col :span="18" :xs="24">
			<el-card class="box-card">
				<template #header>
					<div class="card-header">
						<span>基本资料</span>
					</div>
				</template>
				<el-tabs v-model="baseInfoData.activeName">
					<el-tab-pane label="基本资料" name="baseInfo">
						<BaseInfo :baseInfo="baseInfoData"></BaseInfo>
					</el-tab-pane>
					<el-tab-pane label="修改密码" name="updatePassword">
						<UpdataPassword></UpdataPassword>
					</el-tab-pane>
				</el-tabs>
			</el-card>
		</el-col>
	</el-row>
</template>

<script lang="javascript">
	import { reactive } from 'vue';
	import UserAvatar from '@/components/UserAvatar';
	import BaseInfo from './components/BaseInfo';
	import UpdataPassword from './components/UpdataPassword';
	export default {
		components : {
			UserAvatar,
			BaseInfo,
			UpdataPassword
		},
		setup () {
			let baseInfoData = reactive({
				activeName : 'baseInfo',
				userName : '阿三',
				mobile : '17623453455',
				mail : 'hulei@163.com',
				roles : '超级管理员',
				createTime : '2020-12-12 12:12:12'
			});
			return {
				baseInfoData
			};
		}
	};
</script>

<style lang="scss" scoped>
	.list {
		font-size: 13px;
	}
	.list-group-item {
		height: 40px;
		border-top: 1px solid #e7eaec;
		border-bottom: 1px solid #e7eaec;
		margin-top: -1px;
	}
</style>
